<template>
	<z-paging ref="paging"
		v-model="list[currentIndex].content"
		@query="queryList"
		height="100vh"
		:paging-style="{minHeight: '100vh', backgroundColor: '#F5F6F7'}">
		<template #top>
			<view class="navbar">
				<view v-for="(item, index) in complaintTabs" :key="index" class="nav-item"
					:class="{current: currentIndex === index}" @click="taggleNav(index)">
					<text>{{item.title}}</text>
				</view>
			</view>
		</template>

		<!-- 内容区域 -->
		<view class="content-box">
			<view class="tabs-container" :style="{transform: `translateX(-${currentIndex * 100}%)`}">
				<view v-for="(tabItem, tabIndex) in complaintTabs" :key="tabIndex" class="tab-content">
					<view class="list-scroll-content" :class="{'animate-in': currentIndex === tabIndex}">
						<view v-if="tabIndex === 0">
							<view class="menuItem" v-for="(element,number) in tabItem.content" :key="number" :style="{'--item-index': number}">
								<view class="shopMsg">
									<view class="">
										<text>{{element.ShopName}}</text>
									</view>
								</view>
								<view v-if="element.ProductId" class="productDetail"
									@click="navGoToDetail(element.ProductId,element.ProductType)">
									<view class="product_imgBox">
										<image :src="element.Product.Img" mode="aspectFill"></image>
									</view>
									<view class="productInfo">
										<view class="productName">{{element.Product.Name}}</view>
										<view class="subTitle">{{element.Product.Subtitle}}</view>
										<view class="priceBox">
											<text class="productPrice">¥{{element.Product.BusinessPrice}}</text>
										</view>
									</view>
								</view>
								<view class="myComplaint">
									<view class="rate-wapper">{{$t('myComplaint.rating')}} <uni-rate v-model="element.GoodsGrade" disabled="true" size="14" /></view>
									<text>{{$t('myComplaint.myComment')}} : {{element.Message}}</text>
									<view class="imgBox" v-if="element.ImgList">
										<view class="imgBox_item" v-for="(menuItem,num) in element.ImgList" :key="num" @click="previewImg(menuItem)">
											<image :src="menuItem" mode="aspectFill"></image>
										</view>
									</view>
								</view>
								<view class="time">{{element.AddTime}}</view>
							</view>
						</view>
						<view v-if="tabIndex === 1">
							<view class="menuItem menuItem1" v-for="(element,number) in tabItem.content" :key="number" :style="{'--item-index': number}" @click="toComplaintDetail(element)">
								<view class="time_line">{{element.Status==0?$t('myComplaint.statusProcessing'):$t('myComplaint.statusCompleted')}}</view>
								<view class="userComplaintContain">{{$t('myComplaint.complaintContent')}}：<text>{{element.FeedbackContent}}</text></view>
								<view class="imgBox" v-if="element.WeiXinImgList">
									<view class="imgBox_item" v-for="(menuItem,num) in element.WeiXinImgList" :key="num" @click="previewImg(menuItem)">
										<image :src="menuItem" mode="aspectFill"></image>
									</view>
								</view>
								<view class="userComplaintContain" v-if="element.Status==1">
									{{$t('myComplaint.replyContent')}}：<text>{{element.FeedBackResponse}}</text>
								</view>
								<view class="time">{{$t('myComplaint.complaintDate')}}：{{element.AddTime}}</view>
							</view>
						</view>
            <view v-if="tabIndex === 2">
              <view class="menuItem menuItem1" v-for="(element,number) in tabItem.content" :key="number" :style="{'--item-index': number}" @click="toComplaintDetail(element)">
                <view class="time_line">{{element.Status==0?$t('myComplaint.statusProcessing'):$t('myComplaint.statusCompleted')}}</view>
                <view class="userComplaintContain">{{$t('myComplaint.suggestionContent')}}：<text>{{element.FeedbackContent}}</text></view>
                <view class="imgBox" v-if="element.WeiXinImgList">
                  <view class="imgBox_item" v-for="(menuItem,num) in element.WeiXinImgList" :key="num" @click="previewImg(menuItem)">
                    <image :src="menuItem" mode="aspectFill"></image>
                  </view>
                </view>
                <view class="userComplaintContain" v-if="element.Status==1">
                  {{$t('myComplaint.replyContent')}}：<text>{{element.FeedBackResponse}}</text>
                </view>
                <view class="time">{{$t('myComplaint.suggestionDate')}}：{{element.AddTime}}</view>
              </view>
            </view>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
import {
  getEvaluations,
  getComplaint, getAdvice
} from "@/api/homePage.js"
	import unirRate from '@/components/uni-rate/uni-rate.vue'
	import empty from '@/components/empty.vue'

	export default {
		components: {
			unirRate,
			empty
		},
		data() {
			return {
				GoodsGrade: 4,
				currentIndex: 0,
				list: [],
			};
		},
		computed: {
			complaintTabs() {
				return [{
					title: this.$t('myComplaint.comment'),
					content: []
				},
				{
					title: this.$t('myComplaint.complaint'),
					content: []
				},
				{
					title: this.$t('myComplaint.suggestion'),
					content: []
				}];
			}
		},
		mounted() {
			this.list = this.complaintTabs;
		},
		methods: {
			// 切换导航
			taggleNav(val) {
				this.currentIndex = val;
				this.$refs.paging.reload();
			},
			
			// 获取数据
			async queryList(pageNo, pageSize) {
				try {
					if (this.currentIndex === 0) {
						const { Data } = await getEvaluations({
							Index: pageNo,
							Size: pageSize,
						});
						
						let list = Data.map(item => {
							item.AddTime = item.AddTime.replace('T', ' ');
							if (item.ImgList) {
								item.ImgList = item.ImgList.split('|');
							}
							return item;
						});
						
						this.$refs.paging.complete(list);
					} else if(this.currentIndex === 1){
						const { Data } = await getComplaint({
							Index: pageNo,
							Size: pageSize,
						});
						
						let list = Data.map(item => {
							item.AddTime = item.AddTime.replace('T', ' ');
							return item;
						});
						
						this.$refs.paging.complete(list);
					}else {

            const { Data } = await getAdvice({
              Index: pageNo,
              Size: pageSize,
            });

            let list = Data.map(item => {
              item.AddTime = item.AddTime.replace('T', ' ');
              return item;
            });

            this.$refs.paging.complete(list);
          }
				} catch (e) {
					this.$refs.paging.complete(false);
				}
			},
			
			previewImg(e) {
				uni.previewImage({
					urls: [e],
				});
			},
			
			// 跳转商品详情页
			navGoToDetail(id, type) {
				uni.navigateTo({
					url: `/mall_subpages/mall/goods-detail/goods-detail?id=${id}&type=${type}`
				})
			},
			
			// 跳转投诉详情
			toComplaintDetail(item) {
				uni.navigateTo({
					url: `/usercenter_subpages/userCenter/myComplaintDetail?item=${encodeURIComponent(JSON.stringify(item))}`
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	/* 顶部导航栏样式 */
	.navbar {
		display: flex;
		height: 98rpx;
		background: #FFFFFF;
		position: relative;
		z-index: 10;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		
		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 24rpx;
			color: #666;
			position: relative;
			transition: all 0.3s ease;
			cursor: pointer;

			text {
				display: inline-block;
				padding: 10rpx 30rpx;
				border-radius: 30rpx;
				transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
				position: relative;
				z-index: 1;
				
				&:after {
					content: '';
					position: absolute;
					bottom: 6rpx;
					left: 50%;
					width: 0;
					height: 3rpx;
					background-color: #498FFF;
					transition: width 0.3s ease, left 0.3s ease;
					z-index: 0;
				}
			}

			&:active text {
				transform: scale(0.95);
			}

			&.current {
				text {
					font-size: 30rpx;
					font-weight: 600;
					background-color: #498FFF;
					color: #FFFFFF;
					transform: translateY(0) scale(1);
					animation: popIn 0.4s ease;
					
					@keyframes popIn {
						0% {
							transform: translateY(10rpx) scale(0.9);
							opacity: 0.7;
						}
						70% {
							transform: translateY(-5rpx) scale(1.05);
						}
						100% {
							transform: translateY(0) scale(1);
						}
					}
				}
				
				&:after {
					content: none;
				}
			}
		}
	}

	/* 内容区域样式 */
	.content-box {
		position: relative;
		width: 100%;
		overflow: hidden;
	}

	/* 横向排列的tab容器 */
	.tabs-container {
		display: flex;
		width: 100%;
		transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
		will-change: transform;
	}

	.tab-content {
		flex: 0 0 100%;
		width: 100%;
	}

	.list-scroll-content {
		height: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		opacity: 0;
		transform: translateY(30rpx);
		transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
		
		&.animate-in {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.menuItem {
		text-align: left;
		border-radius: 12rpx;
		font-size: 30rpx;
		padding: 20rpx;
		background-color: #F8F8F8;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
		position: relative;
		margin-bottom: 20rpx;
		animation: fadeInUp 0.5s ease forwards;
		animation-delay: calc(0.1s * var(--item-index, 0));
		will-change: transform, opacity, box-shadow;
		transition: all 0.3s ease;

		@keyframes fadeInUp {
			from {
				opacity: 0;
				transform: translateY(30rpx);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		&:active {
			transform: scale(0.98);
			box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.08);
		}

		text {
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 4;
			-webkit-box-orient: vertical;
		}

		.shopMsg {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #000;
			font-size: 32rpx;
			margin-bottom: 16rpx;

			text {
				margin: 0 10rpx;
				-webkit-line-clamp: 1;
			}
		}

		.productDetail {
			width: 100%;
			min-height: 140rpx;
			padding: 15rpx;
			background-color: #f9f9f9;
			display: flex;
			align-items: flex-start;
			margin-bottom: 10rpx;
			border-radius: 10rpx;
			box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.03);

			.product_imgBox {
				width: 120rpx;
				height: 120rpx;
				border-radius: 8rpx;
				overflow: hidden;
				margin-right: 18rpx;
				flex-shrink: 0;
				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
			.productInfo {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				min-width: 0;
				.productName {
					font-size: 30rpx;
					font-weight: bold;
					color: #222;
					margin-bottom: 6rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.subTitle {
					font-size: 24rpx;
					color: #888;
					margin-bottom: 4rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.remark {
					font-size: 24rpx;
					color: #666;
					margin-bottom: 4rpx;
					word-break: break-all;
				}
				.priceBox {
					margin-top: 4rpx;
					.productPrice {
						color: #fa452d;
						font-size: 28rpx;
						font-weight: bold;
					}
				}
			}
		}

		.myComplaint {
			font-size: 24rpx;
			margin-bottom: 16rpx;
		}

		.userComplaintContain {
			width: 100%;
			margin-bottom: 16rpx;

			text {
				margin-top: 10rpx;
				-webkit-line-clamp: 6;
			}
		}

		.time {
			font-size: 22rpx;
			color: #999;
		}

		.time_line {
			font-size: 26rpx;
			color: #498FFF;
			font-weight: 600;
			width: 100%;
			text-align: right;
			position: absolute;
			right: 4%;
		}
	}

	.imgBox {
		display: flex;
		flex-wrap: wrap;
		margin: 10rpx 0 0;

		.imgBox_item {
			width: 130rpx;
			height: 130rpx;
			margin: 10rpx;
			border: 1rpx solid #f5f5f5;
			border-radius: 10rpx;
			overflow: hidden;
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.95);
			}

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.rate-wapper {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		font-size: 24rpx;

		/deep/ .uni-rate {
			padding-left: 20rpx;
			padding-top: 20rpx;
		}
	}

	.uni-rate {
		padding-top: 12rpx !important;
		padding-left: 12rpx !important;
	}
</style>